<!-- Infinite client scroller - paste into Zoho Sites HTML/embed block -->
<div class="client-scroller" aria-label="Our clients">
  <div class="scroller-track" id="scrollerTrack">
    <!-- Replace these <img> src with your actual client logo URLs (10 items) -->
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+1" alt="Client 1"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+2" alt="Client 2"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+3" alt="Client 3"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+4" alt="Client 4"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+5" alt="Client 5"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+6" alt="Client 6"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+7" alt="Client 7"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+8" alt="Client 8"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+9" alt="Client 9"></div>
    <div class="client-item"><img src="https://via.placeholder.com/220x90?text=Client+10" alt="Client 10"></div>
  </div>
</div>

<style>
  /* Container */
  .client-scroller {
    overflow: hidden;
    width: 100%;
    background: transparent;
    padding: 16px 0;
    box-sizing: border-box;
  }

  /* Track that will be duplicated for seamless scroll */
  .scroller-track {
    display: flex;
    gap: 32px;
    align-items: center;
    will-change: transform;
  }

  .client-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
  }

  .client-item img {
    display: block;
    height: 72px;         /* logo display height */
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: none;
  }

  /* Responsive tweak */
  @media (max-width: 600px) {
    .client-item img { height: 48px; }
    .scroller-track { gap: 18px; }
  }
</style>

<script>
  (function () {
    const track = document.getElementById('scrollerTrack');
    if (!track) return;

    // Duplicate track content until it's wide enough for smooth loop
    const minLoopWidth = track.parentElement.offsetWidth * 2;
    let content = Array.from(track.children);
    let totalWidth = content.reduce((w, el) => w + el.getBoundingClientRect().width + parseFloat(getComputedStyle(track).gap || 0), 0);

    // Clone until width >= minLoopWidth (safe seamless loop)
    while (totalWidth < minLoopWidth) {
      content.forEach(node => {
        const clone = node.cloneNode(true);
        track.appendChild(clone);
      });
      totalWidth = Array.from(track.children).reduce((w, el) => w + el.getBoundingClientRect().width + parseFloat(getComputedStyle(track).gap || 0), 0);
      // safety break to avoid infinite loop
      if (track.children.length > 200) break;
    }

    // Animation using requestAnimationFrame for smooth, controllable scroll
    let pxPerSecond = 60; // adjust speed here (pixels per second)
    let position = 0;
    let isPaused = false;

    const rafStep = (time) => {
      if (!track._lastTime) track._lastTime = time;
      const dt = (time - track._lastTime) / 1000;
      track._lastTime = time;

      if (!isPaused) {
        position -= pxPerSecond * dt;
        // when scrolled past first set width, reset position
        const firstChild = track.children[0];
        if (firstChild) {
          const firstWidth = firstChild.getBoundingClientRect().width + parseFloat(getComputedStyle(track).gap || 0);
          // If first item completely scrolled out, move it to end to create infinite loop
          if (Math.abs(position) >= firstWidth) {
            track.appendChild(track.children[0]);
            position += firstWidth;
          }
        }
        track.style.transform = `translateX(${position}px)`;
      }
      requestAnimationFrame(rafStep);
    };
    requestAnimationFrame(rafStep);

    // Pause on hover / focus for accessibility
    track.parentElement.addEventListener('mouseenter', () => { isPaused = true; });
    track.parentElement.addEventListener('mouseleave', () => { isPaused = false; });
    track.parentElement.addEventListener('focusin', () => { isPaused = true; });
    track.parentElement.addEventListener('focusout', () => { isPaused = false; });

    // Optional: make logos keyboard focusable
    Array.from(track.querySelectorAll('img')).forEach(img => {
      img.setAttribute('tabindex', '0');
    });

    // Resize handler: recalc things if needed (simple approach: reload page widths)
    window.addEventListener('resize', () => {
      // small timeout to let layout stabilize
      setTimeout(() => {
        // if you want to change speed/resizing behavior, do it here
      }, 120);
    });
  })();
</script>
